<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>StatiCrypt: Password protect static HTML</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          type="text/css"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        a.no-style {
            color: inherit;
            text-decoration: inherit;
        }

        body {
            font-size: 16px;
        }

        label.no-style {
            font-weight: normal;
        }
    </style>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-73629908-2', 'auto');
        ga('send', 'pageview');

    </script>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>
                StatiCrypt
                <div class="pull-right">
                    <iframe src="https://ghbtns.com/github-btn.html?user=robinmoisson&repo=staticrypt&type=star&size=large"
                            frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
                    <iframe src="https://ghbtns.com/github-btn.html?user=robinmoisson&repo=staticrypt&type=fork&size=large"
                            frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
                </div>
                <br>
                <small>Password protect a static HTML page</small>
            </h1>
            <p>
                Based on the <a href="https://github.com/brix/crypto-js">crypto-js library</a>, StatiCrypt uses AES-256
                to encrypt your string with your passphrase in your browser (client side).
            </p>
            <p>
                Download your encrypted string in a HTML page with a password prompt you can upload anywhere (see <a
                    target="_blank" href="example.html">example</a>).
            </p>
            <br>

            <h4><a class="no-style" id="toggle-concept" href="#">HOW IT WORKS ►</a></h4>
            <div id="concept" class="hidden">
                <p>
                    StatiCrypt generates a static, password protected page that can be decrypted in-browser:
                    just send or upload the generated page to a place serving static content (github pages, for example)
                    and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.
                </p>
                <p>
                    <b class="text-danger">Disclaimer</b> TL;DR: if you have extra sensitive banking data, you should probably
                    use something else :)
                </p>
                <p>
                    StatiCrypt basically encrypts your page and puts everything with a user-friendly way to use a password
                    in the new file.
                    <br>AES-256 is state of the art but <b>brute-force/dictionary attacks would be trivial to
                    do at a really fast pace: use a long, unusual passphrase&nbsp;!</b>
                </p>
                <p>
                    The concept is simple but this is a side project - not purporting to be bulletproof, feel free to
                    contribute or report any thought to the <a href="https://github.com/robinmoisson/staticrypt">GitHub
                    project</a>&nbsp;!
                </p>
            </div>
            <br>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form id="encrypt_form">
                <div class="form-group">
                    <label for="passphrase">Passphrase</label>
                    <input type="password" class="form-control" id="passphrase"
                           placeholder="Passphrase (choose a long one!)">
                </div>
                <div class="form-group">
                    <label for="unencrypted_html">HTML/string to encrypt</label>
                    <textarea class="form-control" id="unencrypted_html" placeholder="<html><head>..."
                              rows="5"></textarea>
                </div>
                <p>
                    <a href="#" id="toggle-extra-option">+ More options</a>
                </p>
                <div id="extra-options" class="hidden">
                    <div class="form-group">
                        <label for="title">Page title</label>
                        <input type="text" class="form-control" id="title" placeholder="Default: 'Protected Page'">
                    </div>
                    <div class="form-group">
                        <label for="instructions">Instructions to display the user</label>
                        <textarea class="form-control" id="instructions" placeholder="Default: nothing."></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="no-style">
                        <input type="checkbox" id="embed-crypto" checked>
                        Embed crypto-js into your file
                        <abbr title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN.">?</abbr>
                    </label>
                </div>

                <button class="btn btn-primary pull-right" type="submit">Generate passphrase protected HTML</button>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h2>Encrypted HTML</h2>
            <p><a class="btn btn-success download"
                  download="encrypted.html"
                  id="download-link"
                  disabled="disabled">Download html file with password prompt</a></p>
            <pre id="encrypted_html_display">
Your encrypted string</pre>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"
        integrity="sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7"
        crossorigin="anonymous"></script>

<script src="https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>

<script>
    // enable CKEDIRTOR
    CKEDITOR.replace( 'instructions' );

    var htmlToDownload;

    var renderTemplate = function (tpl, data) {
        return tpl.replace(/{(.*?)}/g, function (_, key) {
            return data && data[key] || '';
        });
    };

    /**
     * Fill the password prompt template with data provided.
     * @param data
     */
    var setFileToDownload = function (data) {
        var request = new XMLHttpRequest();
        request.open('GET', 'password_template.html', true);
        request.onload = function() {
            var renderedTmpl = renderTemplate(request.responseText, data);

            var downloadLink = document.querySelector('a.download');
            downloadLink.href = 'data:text/html,' + encodeURIComponent(renderedTmpl);
            downloadLink.removeAttribute('disabled');

            htmlToDownload = renderedTmpl;
        };
        request.send();
    };

    /**
     * Download crypto-js lib to embed it in the generated file, update the file when done.
     * @param data
     */
    var setFileToDownloadWithEmbeddedCrypto = function (data) {
        var request = new XMLHttpRequest();
        request.open('GET', 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js', true);
        request.onload = function() {
            data['crypto_tag'] = '<script>' + request.responseText + '</scr' + 'ipt>';
            setFileToDownload(data);
        };
        request.send();
    };

    /**
     * Handle form submission.
     */
    document.getElementById('encrypt_form').addEventListener('submit', function (e) {
        e.preventDefault();

        // update instruction textarea value with CKEDITOR content
        // (see https://stackoverflow.com/questions/3147670/ckeditor-update-textarea)
        CKEDITOR.instances['instructions'].updateElement();

        var unencrypted = document.getElementById('unencrypted_html').value;
        var passphrase = document.getElementById('passphrase').value;

        var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
        var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
        var encryptedMsg = hmac + encrypted;

        var pageTitle = document.getElementById('title').value.trim();
        var instructions = document.getElementById('instructions').value;
        var data = {
            title: pageTitle ? pageTitle : 'Protected Page',
            instructions: instructions ? instructions : '',
            encrypted: encryptedMsg,
            crypto_tag: '<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" integrity="sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7" crossorigin="anonymous"></scr' + 'ipt>'
        };

        document.getElementById('encrypted_html_display').textContent = encryptedMsg;

        if (document.getElementById("embed-crypto").checked) {
            setFileToDownloadWithEmbeddedCrypto(data);
        }
        else {
            setFileToDownload(data);
        }

    });

    document.getElementById('toggle-extra-option')
    .addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('extra-options').classList.toggle('hidden');
    });

    document.getElementById('toggle-concept')
    .addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('concept').classList.toggle('hidden');
    });


    /**
     * Browser specific download code.
     */
    document.getElementById('download-link')
        .addEventListener('click', function (e) {

        var isIE = (navigator.userAgent.indexOf("MSIE") !== -1 ) || (!!document.documentMode === true ); // >= 10
        var isEdge = navigator.userAgent.indexOf("Edge") !== -1;

        // download with MS specific feature
        if (htmlToDownload && (isIE || isEdge)) {
            e.preventDefault();
            var blobObject = new Blob([htmlToDownload]);
            window.navigator.msSaveOrOpenBlob(blobObject, 'encrypted.html');
        }

        return true;
    })
</script>


</body>
</html>
